﻿<!DOCTYPE html>
<html lang="en">

<head>
    <%- include('includes/head',{title: post.title }) %>
    <link rel="stylesheet" href="/styles/posts.css">
    <link rel="stylesheet" href="/styles/base.css">
    <link rel="stylesheet" href="/styles/forms.css">
    <script src="../public/scripts/comments.js"></script>
</head>
<body>
<%- include('includes/header') %>
<main id="post-detail">
    <h1><%= post.title %></h1>
    <section id="post-meta">
        <address>
            <a href="mailto:<%= post.author.email %>">
                <%= post.author.name %>
            </a>
        </address>
        |
        <time datetime="<%= post.date %>"><%= post.humanReadableDate %></time>
    </section>
    <hr>
    <section>
        <p id="body">
            <%= post.body %>
        </p>
    </section>

    <section id="comments">
        <% if(!comments) { %>
            <p>
                This post might have comments.You can load them if you want to view them.
            </p>
            <button id="load-comments-btn" class="btn btn-alt" data-postid="<%= post._id %>">Load Comments</button>
        <% } else if (comments.length === 0 ) { %>
            <p>No comments found.</p>
        <% }else { %>
            <ol>
                <% for(const comment of comments) { %>
                    <li>
                        <%- include('includes/comment-item',{comment:comment}) %>
                    </li>
                <% } %>
            </ol>
        <% } %>
    </section>
</main>
</body>
</html>